// 解析首页链接获取d_name
function getUrl() {
  let iurl = window.location.search
  let theRequest = new Object();
  if (iurl.indexOf("?") != -1) {
    let str = iurl.substr(1);
    strs = str.split("&")
    for (let i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1])
    }
  }
  return theRequest;
}
let dname = getUrl().d_name

// promise封装ajax
let url = `/user/list/?dname=${dname}`
let getData = function (url) {
  return new Promise(
    function (resolve, reject) {
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let result = JSON.parse(xhr.responseText);
            // console.log(result);
            resolve(result);
          } else {
            reject(new Error("Request was unsuccessful: ") + xhr.status);
          }
        }
      }
      xhr.open("GET", url, true);
      xhr.send();
    }
  );
};

// 循坏显示房间信息到页面
let info = document.getElementById('info');
getData(url).then((result) => {
  info.innerHTML = showlist(result.data)
});

// 未定义搜索城市自动显示北京
if (dname == undefined) {
  dname = "北京"
}

// 显示首页传递的城市
document.getElementById("sCity").innerHTML = `<input type="text" placeholder="热门城市" value="${dname}" id="cityInput">`

// 根据搜索条显示房间详情
let cityInput = document.getElementById("cityInput")
let reserveBtn = document.getElementById("reserveBtn")
reserveBtn.onclick = function () {
  //用户输入的过后cityInput.value是输入的值，携带数据访问搜索页面
  if (cityInput.value) {
    reserveBtn.href = `./search.html?d_name=${cityInput.value}`;
  } else {
    reserveBtn.href = `./search.html?d_name=北京`
  }
}

// ----------------------------------------------------------------------
let remindCity = document.getElementById("remind");
//先获取城市列表ul后面添动态加li，拼接li的值
let cityUl = document.getElementById("cityUl");
//console.log(cityInput,reserveBtn,remindCity);
//监听用户输入城市的时候显示城市提示框
let flag = false;
let fn_fcs = function () {
  remindCity.style.display = "block";
};
//判断点击的是不是a标签，如果是，里面内容赋给城市输入框的value ,先清空，后赋值,改flag状态
let fn_clk = function (e){
  let res = e.target.tagName.toLowerCase();
  if (res === "a"){
    cityInput.value = "";
    cityInput.value = e.target.innerText;
    //console.log(cityInput.value);
    flag = true ;
  }
};
cityInput.onfocus = fn_fcs;
remindCity.onclick = fn_clk;
//用户勾选热门城市后 鼠标移除 渲染城市input框的value，并且自身消失
remindCity.onmousemove = function () {
  //判断用户勾选热门城市，勾选后提示框消失
  if (flag && cityInput.value){
    remindCity.style.display = "none";
  }
}

//页面加载时,渲染数据
document.body.onload = function (){
  //拿到地区名后渲染到提示框
      getData("/admin/cityname").then((result)=>{
        let str = ""
  //循环拼接str 再赋值给li
        let len = result.data.length
        for (let i=0;i<len;i++) {
          str+=`<li><a href="javascript:void(0)">${result.data[i].d_name}</a></li>`
        }
        cityUl.innerHTML = str
      });
    }

// -----------------------------------------------------------------------

// 筛选类型
// 不限
let N_A = document.getElementById('N_A');
N_A.onclick = function () {
  getData(url).then((result) => {
    info.innerHTML = showlist(result.data)
  });
}

// 房间类型
let roomBtn = document.getElementsByClassName("roomBtn")
for (let i = 0; i < roomBtn.length; i++) {
  roomBtn[i].onclick = function () {
    getData(url).then((result) => {
      let res = result.data.filter((type) => {
        return type.r_type.indexOf(roomBtn[i].value) !== -1
      })
      info.innerHTML = showlist(res)
      if (res.length == 0) {
        info.innerHTML = `<div class="N"><p>暂无信息</p></div>`
      }
    })
  }
}

//  筛选价格
// 不限
let NA = document.getElementById('NA');
NA.onclick = function () {
  getData(url).then((result) => {
    info.innerHTML = showlist(result.data)
  });
}

//  100-400
let r100 = document.getElementById('r100')
r100.onclick = function () {
  getData(url).then((result) => {
    let res = result.data.filter((type) => {
      return type.price > 100 && type.price < 400
    })
    info.innerHTML = showlist(res)
    if (res.length == 0) {
      info.innerHTML = `<div class="N"><p>暂无信息</p></div>`
    }
  });
}

//  400-700
let r400 = document.getElementById('r400')
r400.onclick = function () {
  getData(url).then((result) => {
    let res = result.data.filter((type) => {
      return type.price > 400 && type.price < 700
    })
    info.innerHTML = showlist(res)
    if (res.length == 0) {
      info.innerHTML = `<div class="N"><p>暂无信息</p></div>`
    }
  });
}

//  700以上
let r700 = document.getElementById('r700')
r700.onclick = function () {
  getData(url).then((result) => {
    let res = result.data.filter((type) => {
      return type.price > 700
    })
    info.innerHTML = showlist(res)
    if (res.length == 0) {
      info.innerHTML = `<div class="N"><p>暂无信息</p></div>`
    }
  });
}

// 循环显示房间信息
function showlist(arr) {
  let s = '';
  for (let i = 0; i < arr.length; i++) {
    s += `<div class="detail">
      <div class="room_pic"><a href=./roomlist.html?r_id=${arr[i].r_id}><img src="../img/${arr[i].r_pic}" alt="图裂了" ></a></div>
        <div class="room_text">
          <div class="room_title">
            <a href=./roomlist.html?r_id=${arr[i].r_id}>${arr[i].title}</a>
          </div>
          <div class="room_intro">
            <p>宜住${arr[i].r_member}人</p>
            <p>地址:${arr[i].r_ads}</P>
            <span>￥${arr[i].price}</span>/晚
          </div>
        </div>
      </div>`
  }
  return s;
}